import backgroundImg from '@/assets/img/category/bg.png';
import TopFooter from '@/components/TopFooter';
import type { ReactNode } from 'react';
import React, { memo, useEffect, useState } from 'react';
import { useLocation } from 'umi';
import Recent from '../home/cpm/Recent';
import './index.less';

interface Iprops {
  children?: ReactNode;
}
interface ILocationState {
  tagId: string;
  text: string;
}

const Search: React.FC<Iprops> = (props) => {
  const [text, setText] = useState('');
  const [search, setSearch] = useState({
    tagId: '',
  });
  const location = useLocation();

  useEffect(() => {
    if (location.state) {
      const { text, tagId } = location.state as ILocationState;
      if (tagId) {
        setSearch({
          tagId,
        });
        setText(text);
      }
    }
  }, [location.state]);

  return (
    <div className="search-page">
      <div className="sp-imgcover">
        <img src={backgroundImg} alt="backgroundImg" />
        <span className="spi-title">{text}</span>
      </div>
      <div className="sp-content wrapper-v2">
        {search.tagId && (
          <Recent
            title=""
            params={{
              tagId: search.tagId,
            }}
          />
        )}
      </div>
      <TopFooter></TopFooter>
    </div>
  );
};

export default memo(Search);
